import React, { useState } from "react";
import style from "./jx-detail.module.scss";

import { useEffect } from "react";
import XxtvCard from "../../ui/card/xxtv-card";
import http from "@/utils/request";
import { Spin } from "antd";
function DealerInfomationView({ state }) {
    const [loading, setLoading] = useState(false);
    const [insuredCode, setInsuredCode] = useState();
    const [info, setInfo] = useState({
        dealerCode: "",//主机厂店代码
        dealerName: "",//经销商名称
        dealerShortName: "",//经销商简称
        groupCode: "",//所属集团代码(这里的集团指经销商集团)
        groupName: "",//所属集团名称
        comCode: "",//所属机构
        brandName: "",//经营品牌
        sellAddress: "",//经营地址
        openingTime: "",//开业日期
        operatingState: "",//营业状态
        teamInfo: "",//管理团队信息
        dealerUserCode: "",//经销商保险联系人代码
        dealerUsername: "",//经销商保险联系人名称
        dealerMobile: "",//经销商保险联系电话
        businessScope: "",//经营范围
        dealerGroupCode: "",//经销商集团代码
        dealerGroupName: "",//经销商集团名称
        dealerGroupShortName: "",//经销商集团简称
        dealerGroupUserCode: "",//集团保险联系人代码
        dealerGroupUsername: "",//集团保险联系人名称
        groupHolderInfo: ""//股东名称
    })

    // 查询详情信息
    const getDetailInfo = (insuredCode) => {
        http.post({
            url: "/cifgp-core-api/dealerInfo/carDealerGroup",
            params: {
                insuredCode
            },
            before: () => setLoading(true),
            success: res => {
                setInfo({
                    ...res.data
                });
            },
            failure: msg => { },
            complete: () => setLoading(false),
        })
    }

    useEffect(() => {
        if (insuredCode) {
            getDetailInfo(insuredCode);
        }
    }, [insuredCode])






    useEffect(() => {
        const str = info.dealerShortName || "车商业务看板"
        document.title = str
    }, [info])

    useEffect(() => {
        const { insuredCode = "" } = state.list[0]
        // setInfo({
        //     ...info,
        //     ...state.list[0]
        // })
        setInsuredCode(insuredCode);
    }, [state])


    // 返回是营业中还是停业还是无数据
    const getStatus = (operatingstate) => {
        if (operatingstate === "1") {
            return "营业中"
        } else if (operatingstate === "0") {
            return "停业中"
        } else {
            return "无数据"
        }
    }

    const [active, setActive] = useState(2);
    const onChange = (key) => {
        setActive(key);
    }

    // 经销商信息和集团信息切换按钮
    const BtnEl = () => {
        return (
            <>
                <div className={style.btnBox}>
                    <div onClick={() => onChange(1)} className={active === 1 ? "btn active" : "btn"}>经销商信息</div>
                    <div onClick={() => onChange(2)} className={active === 2 ? "btn active" : "btn"}>集团信息</div>
                </div>
            </>
        )
    }



    return (
        <>
            <XxtvCard
                title="经销商详情"
                ActionElement={<BtnEl />}
            >
                {/* <Spin spinning={loading}>

                </Spin> */}
                <div className={style.box}>
                    {
                        active === 1 ?
                            <div className="dealerInfomation" style={{ flex: 2 }}>

                                <div className="card-center">
                                    <div className="box">
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">主机厂店代码</span>
                                                <span className="text">{info.dealerCode || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">经销商简称</span>
                                                <span className="text">{info.dealerShortName || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">经销商名称</span>
                                                <span className="text">{info.dealerName || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">开业日期</span>
                                                <span className="text">{info.openingTime || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">营业状态</span>
                                                <span className="text">{getStatus(info.operatingState)}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">保险联系人</span>
                                                <span className="text">{info.dealerUsername || "无数据"} </span>
                                            </div>
                                        </div>
                                        {/* <div className="item">
                                            <div className="item-container">
                                                <span className="label">归属业务员</span>
                                                <span className="text">{info.dealerusername || "无数据"}</span>
                                            </div>
                                        </div> */}
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">经销地址</span>
                                                <span className="text">{info.sellAddress || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">经营品牌</span>
                                                <span className="text">{info.brandName || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">所属集团</span>
                                                <span className="text">{info.groupName || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">股东名称</span>
                                                <span className="text">{info.groupHolderInfo || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">所属机构</span>
                                                <span className="text">{info.comCode || "无数据"}</span>
                                            </div>
                                        </div>
                                        {/* <div className="item">
                                            <div className="item-container">
                                                <span className="label">所属团队</span>
                                                <span className="text">{info.teaminfo || "无数据"}</span>
                                            </div>
                                        </div> */}
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">管理团队信息</span>
                                                <span className="text">{info.teamInfo || "无数据"}</span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div> :
                            <div className="dealerInfomation" style={{ flex: 1 }}>

                                <div className="card-center">
                                    <div className="box">

                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">集团全名</span>
                                                <span className="text">{info.dealerGroupName || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">集团简称</span>
                                                <span className="text">{info.dealerGroupShortName || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">集团保险联系人</span>
                                                <span className="text">{info.dealerGroupUsername || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">集团股东信息</span>
                                                <span className="text">{info.groupHolderInfo || "无数据"}</span>
                                            </div>
                                        </div>
                                        <div className="item">
                                            <div className="item-container">
                                                <span className="label">广汽经销商情况</span>
                                                <span className="text">{info.groupgacdealerinfo || "无数据"}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    }

                </div>

            </XxtvCard>


        </>
    )
}
export default DealerInfomationView